<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <script src="../xhr_ajax交互/js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #main {
            height: 400px;
            /* width: 200px; */
        }
    </style>
</head>

<body>
    <div id="main"> </div>

    <script>
        //1 获取容器 容器事先要给高，高不给的话就是0
        var chartDom = document.getElementById('main');

        //2 实例化一个echart对象 注意echarts.init(dom)  new Student()区别
        var myChart = echarts.init(chartDom); //echarts实例
        function u() {

            $.ajax({
                type: 'get',
                url: 'http://localhost:3000/bypie',
                success(res) {
                    // console.log(res);
                    //3 声明一个 配置项 对象
                    let option = {
                        color: ['blue', 'red', 'pink'],
                        title: {
                            text: '班上男女比列',
                            subtext: '真实数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: res,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    //4 执行配置项，展示图表
                    myChart.setOption(option);
                }
            })
        }
        u()





        // option = {
        //     xAxis: {
        //         type: 'category',
        //         data: dx
        //     },
        //     yAxis: {
        //         type: 'value'
        //     },
        //     series: [{
        //         data: dy,
        //         type: 'bar',
        //         showBackground: true,
        //         backgroundStyle: {
        //             color: 'rgba(180, 180, 180, 0.2)'
        //         }
        //     }]
        // };



        //
    </script>


</body>

</html>